<template>
	<view class="assemble-order-container">
        <u-line></u-line>
       <view class="assemble-order-goods">
           <view class="goods-left">
                <u-image width="200" height="200" border-radius="20" shape="square" :src="pt_order.thumbnail" ></u-image>
           </view>
           <view class="goods-right u-m-l-15">
                <view class="u-line-2">{{pt_order.goods_name}}</view>
                <view class="goods-right-bottom">
                    <text class="flex">{{pt_order.required_num}}人团 ⋅ 已有{{pt_order.offered_num}}人参团</text>
                    <view class="">
                        <text class="flex goods-price ">{{ pt_order.origin_price | unitPrice('￥') }}</text>
                        <text class="flex">拼团省{{ savePrice | unitPrice('￥') }}</text>
                    </view>
                </view>
           </view>
       </view>
        <u-line></u-line>
        <view class="pt_share">
            <image :src="pintuan_bg" class="pt_bg"/>
            <view class="assemble-invitations">
                <view v-if="isPay || isFormed">
                    <text class="pt_share_text" v-if=" pt_order.required_num > pt_order.offered_num ">
                      仅剩{{ pt_order.required_num - pt_order.offered_num  }}个名额
                    </text>
                    <text class="pt_share_text" v-else> 已成团 </text>
                </view>
                <view class="face-container">
                    <view class="face" v-for="(member,memberIndex) in pt_order.participants" :key="memberIndex">
                        <u-badge class="face-header-tips" count="团长" type="warning" size="mini" :offset="[-4, -25]" v-if="member.is_master === 1 "></u-badge>
                        <u-image class="face-header" width="120" height="120" shape="circle" :src="member.face" v-if="member.face"></u-image>
                        <u-image class="face-header" width="120" height="120" shape="circle" src="/static/images/member/icon-noface.jpg" v-else></u-image>
                    </view>
                </view>
                <view v-if="pt_order.left_time != 0">
                    剩余
                    <u-count-down :timestamp="pt_order.left_time" :show-days="true" separator="zh" :show-border="true" bg-color="black" color="#FFFFFF"></u-count-down>
                    结束
                </view>
                <!--未成团 - 待支付-->
                <view class="share-view" v-if="pt_order.left_time != 0 && !isPay && !isShared && isFinshed"  @click="onPay">
                    <view class="">去支付</view>
                </view>
                <!--未成团 - 未被分享-->
                <view class="share-view" v-if="pt_order.left_time != 0 && !isShared && isFinshed && isPay"  @click="handleShare">
                    <view class="">邀请好友</view>
                </view>
                <!--未成团 - 被分享-->
                <view class="share-view" v-if="pt_order.left_time != 0 && isShared && isFinshed && !isPay"  @click="handleSpec">
                    <view class="">我也要参团</view>
                </view>
                <!--已成团 - 被分享 -->
                <view class="share-view" v-if="pt_order.left_time != 0 && !isFinshed && isShared"  @click="handleSpec">
                    <view class="">一键发起拼团</view>
                </view>
                <!--已成团 - 未被分享 -->
                <view class="share-view" v-if="pt_order.left_time != 0 && !isFinshed && !isShared"  @click="handleHome">
                    <view class="">去逛逛</view>
                </view>
                <!--拼团活动已结束-->
                <view class="share-view" v-if="pt_order.left_time == 0"  @click="handleHome">
                    <view class="">去逛逛</view>
                </view>
            </view>
        </view>
        <!-- 规格、参数 -->
        <goods-specs
              :goodsId="pt_order.goods_id"
              :skuId="pt_order.sku_id"
              :pintuanId="pt_order.pintuan_id"
              :show="showSpecsPopup"
              @sku-changed="handleSkuChange"
              @num-changed="(num) => { buyNum = num }"
              @close="handleSpecClose"
              @to-assemble-buy-now="toAssembleBuyNow"
            />
        <assemble-share
            ref="assembleShare"
            :show="disPopupShow"
            :goods_id="pt_order.goods_id"
            :goods_name="pt_order.goods_name"
            :goods_img="pt_order.thumbnail"
            :goods_price="pt_order.sales_price"
            :ptInfo="ptInfo"
            @close="handleShareClose"
        ></assemble-share>
	</view>
</template>

<script>
    import goodsSpecs from './assemble/-goods-specs.vue';
    import assembleShare from './assemble/-assemble-share.vue';
    import * as API_Order from '@/api/order.js'
    import * as API_Trade from '@/api/trade.js'
	export default {
		data() {
			return {
                //分享背景
                pintuan_bg: '/static/images/background-pt-share_01.png',
                //是否支付
                isPay: false,
                //拼团订单编号
                order_sn: '',
                //是否成团
                isFormed: false,
                 /** 是否是被分享的 */
                isShared: false,
                showSpecsPopup: false,
                disPopupShow: false, // 展示分享弹框
                //拼团订单参数
                pt_order: {},
                /** 已选sku */
                selectedSku: {},
                /** 购买数量 */
                buyNum: 1,
                // 拼团分享参数
                ptInfo: {
                    sku_id: '',
                    goods_id: '',
                    order_sn: '',
                    pt_price: 0
                }
			};
		},
        components: {
            assembleShare,
            goodsSpecs
        },
        onLoad(options) {
            this.order_sn = options.order_sn;
            //  检测是否是被分享的
            this.isShared = !!(options.from_nav && options.from_nav === 'assemble');
            this.isPay = options.pay_status === "PAY_YES";
        },
        onShow() {
           this.assembleOrderDetail()
        },
        computed:{
            // 拼团省
            savePrice() {
                return parseFloat(this.pt_order.origin_price) - parseFloat(this.pt_order.sales_price)
            },
            // 是否已完成拼团
            isFinshed() {
                return  this.pt_order.required_num - this.pt_order.offered_num
            },
        },
        //小程序分享
        onShareAppMessage() {
            const ptParams = this.$refs.assembleShare.ptParams
            this.$refs.assembleShare.ptShow = false
            return {
                title: this.pt_order.goods_name,
                imageUrl: this.pt_order.thumbnail,
                path: `order-module/order/assemble${ptParams}`
            }
        },
        methods: {
            //去逛逛
            handleHome() {
                uni.switchTab({
                    url: '/pages/tabs/home/home'
                })
            },
            //分享
            handleShare() {
                this.judgeLogin(() => {
                    this.disPopupShow = true
                })
            },
            //规格弹窗
            handleSpec() {
                this.judgeLogin(() => {
                    this.showSpecsPopup = true
                })
            },
            //关闭弹窗
            handleShareClose(show) {
                this.disPopupShow = show
            },
            //关闭弹窗
            handleSpecClose(show) {
                this.showSpecsPopup = show
            },
            // 获取拼团订单详情
            async assembleOrderDetail() {
                await API_Order.getAssembleOrderDetail(this.order_sn).then(res => {
                    this.pt_order = res
                    this.ptInfo = {
                        sku_id: this.pt_order.sku_id,
                        goods_id: this.pt_order.goods_id,
                        order_sn: this.order_sn,
                        pt_price: this.pt_order.sales_price
                    }
                    this.isFormed = this.pt_order.order_status === 'formed'
                    this.pintuan_bg = this.isPay ? '/static/images/background-pt-share_02.png' : this.pintuan_bg
                    this.pintuan_bg = this.isFormed ? '/static/images/background-pt-share_03.png' : this.pintuan_bg
                });
            },
            //支付订单
            onPay() {
                uni.navigateTo({
                    url: '/order-module/cashier/cashier?order_sn='+this.order_sn
                })
            },
            /** 参与分享来的拼团 或者一键发起拼团 */
            toAssembleBuyNow() {
                this.judgeLogin(() => {
                    this.showSpecsPopup = false
                    const { buyNum } = this
                    const { sku_id } = this.selectedSku
                    API_Trade.addToAssembleCart(sku_id, buyNum).then(_ => {
                      const shareLink = this.isFinshed ? `/order-module/checkout/checkout?assembleOrderId=${this.pt_order.order_id}&from_nav=assemble` : `/order-module/checkout/checkout?from_nav=assemble`
                      uni.navigateTo({
                          url: shareLink
                      })
                    })
                })
            },
            handleSkuChange(sku) {
                this.selectedSku = sku
            }

        }
	}
</script>

<style lang="scss">
.assemble-order-container {
    background-color: #FFFFFF;
    .assemble-header {
        background-color: #FFFFFF;
        display: flex;
        height: 100rpx;
        .assemble-header-left {
            margin-left: 20rpx;
        }
        .content-view {
            flex: 1;
        }
        .assemble-header-right {
            float: right;
            margin-right: 20rpx;
            color: red;
        }
    }
    .assemble-order-goods {
        margin: 10rpx 10rpx;
        height: 210rpx;
        background-color: #FFFFFF;
        display: flex;
        .goods-left {
            width: 210rpx;
        }
        .goods-right {
            .goods-right-bottom {
                font-size: 23rpx;
                color: #82848A;
                margin-top: 60rpx;
            }
            .goods-price {
                color: red;
                margin-right: 20rpx;
            }
        }
    }
    .pt_share {
        margin: 20rpx 0;
        background-color: #FFFFFF;
        .pt_bg{
              width: 100%;
              height: 170rpx;
        }
        .assemble-invitations {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 500rpx;
            .pt_share_text {
                font-size: 24rpx;
                display: inline-block;
                background-color: #f7297c;
                color: #fff;
                padding: 4px 8px;
                border-radius: 20px;
            }
            .face-container {
                display: flex;
                max-width: 100%;
                align-content: center;
                white-space: nowrap;
                overflow-y: auto;
                margin: 60rpx 0rpx;
                .face {
                    margin: 0 20rpx;
                    text-align: center;
                    position: relative;
                    .face-header-tips {
                        position: absolute;
                        z-index: 5;
                        /* #ifdef MP */
                        width: 50rpx;
                        right: 0rpx;
                        /* #endif */
                    }
                    .face-header{
                        z-index: 4;
                    }
                }
            }
            .share-view {
                margin-top: 50rpx;
                border-radius: 20rpx;
                background-color: #f7297c;
                color: #FFFFFF;
                padding: 20rpx;
                width: 90%;
                text-align: center;
            }
        }

    }
}
</style>
